<template>
  <div>
    <!-- 顶部导航栏 -->
    <AppHeader style="z-index: 10"></AppHeader>
    <!-- 顶部图 -->
    <div class="top_tu">
      <h1 class="title">{{sceneryData[2].scenery_name}}</h1>
      <van-image
        width="100%"
        height="20rem"
        fit="cover"
        :src=dz+sceneryData[2].scenery_img1
      />
    </div>

    <!-- 简介 -->
    <div class="jianjie">
      <h2>简介</h2>
      <p>
        {{sceneryData[2].scenery_content1}}
      </p>
    </div>
    <h2 class="h2_fgyl">风光一览</h2>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <van-image
          width="100%"
          height="12rem"
          fit="cover"
          :src=dz+sceneryData[2].scenery_img1
        />
      </van-swipe-item>

      <van-swipe-item>
        <van-image
          width="100%"
          height="12rem"
          fit="cover"
          :src=dz+sceneryData[2].scenery_img2
        />
      </van-swipe-item>

    </van-swipe>
    <div class="content">
      <h2>倒流成因</h2>
      <p>
        {{sceneryData[2].scenery_content2}}
      </p>
    </div>

    <div class="content">
      <h2>主要游览项目</h2>
      <p>
        {{sceneryData[2].scenery_content3}}
      </p>
    </div>
    
    <AppFooter></AppFooter>
  </div>
</template>

<script>
import AppHeader from "@/components/AppHeader.vue";
import AppFooter from "@/components/AppFooter.vue";
import httpApi from "@/http";

export default {
  components: { AppHeader, AppFooter },
  data() {
    return {
      sceneryData:[],
      dz:'http://localhost:3010/images/'
    }
  },
  methods: {
    /** 发送请求 加载风景列表 */
    listScenery() {
      httpApi.SceneryApi.queryAllScenery().then((res) => {
        console.log("加载风景列表", res);
        this.sceneryData = res.data.data;
        console.log(this.sceneryData);
      });
    },
  },
  mounted() {
    
    this.listScenery();
  },
};
</script>

<style lang="scss" scoped>
// 顶部样式
.dingbu {
  background-color: #fff;
}
.top_tu {
  position: relative;
  top: 0;
  padding-bottom: 2rem;
  .title {
    position: absolute;
    z-index: 10;
    top: 55%;
    left: 2rem;
    color: #fff;
    font-size: 3rem;
  }
}
p {
  line-height: 2rem;
  text-align: justify;
  padding: 0 1rem;
}
.jianjie {
  h2 {
    padding: 0 1rem;
  }
  p {
    padding: 1rem 2rem;
  text-align: justify;
  }
}
.h2_fgyl {
  padding: 1rem;
}
// 内容

.content {
  padding: 1rem 1rem 0;
  
  > h2 {
    padding-bottom: 1rem;
  }
}
</style>
